<!-- 我的页面---------------- -->
<template>
	<view class="left-right">
		<!-- 	<mine-topCard>这个组件不要了</mine-topCard> -->
		<!-- 顶部卡片 -->
		<view class="topBox">
			<view class="my-top">
				<text>我的</text>
				<!-- 设置-------------------- -->
				<view class="setting" @click="toSetting()">
					<image src="https://cdn8.axureshop.com/demo/1689476/images/%E6%88%91%E7%9A%84/u4801.png"></image>
				</view>

			</view>
			<view class="card-box">
				<view style="display: flex;">
					<view>
						<image style="border-radius: 12rpx;" :src="msgData.avatar"></image>
					</view>
					<view class="tagBox">
						<view class="msgData-box">
							<text class="msgData-name" style="font-size: 20px;color: #fff;margin-right: 20rpx;">{{
								msgData?.name || msgData.nickname }}</text>
						</view>
						<view class="nameBox">
							<!-- <text style="margin-right: 25rpx;">{{ msgData.gender === 1 ? '男' : '女' }}</text> -->

							<span v-if="msgData.gender == 1">男</span>
							<span v-if="msgData.gender == 0">女</span>

							<text style="margin-left: 15rpx;" v-if="msgData.birthday"> {{ calculateAge(msgData.birthday)
							}}岁</text>
						</view>
					</view>
				</view>
				<button class="homeTeam" @click="showPopup = true">切换家庭成员</button>
			</view>

			<!-- 	底部按钮弹窗-->
			<up-popup ref="popup" type="bottom" :mask-click="true" :show="showPopup" @maskClick="showPopup = false">
				<view class="popup-content">
					<text style="font-size: 18px; padding: 20rpx;">请选择要切换的家庭成员</text>
					<view class="member-list">
						<!-- 当前用户 -->
						<view class="member-item" @click="switchUser(userStore.userInfo)">
							<text>{{ userStore.userInfo.name || userStore.userInfo.nickname }}</text>
						</view>
						<!-- 家庭成员列表 -->
						<view v-for="item in familyMembers" :key="item._id" class="member-item"
							@click="getRelationType(item.otherId)">
							<text>{{ item.otherId?.name || item.otherId?.nickname }}</text>
						</view>
					</view>
					<button @click="showPopup = false" style="margin-top: 20rpx;">取消</button>
				</view>
			</up-popup>
		</view>
		<!-- 组件引入 -->
		<all-list></all-list>
	</view>
</template>

<script setup>
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app";
import {
	ref
} from 'vue';
import {
	useUserStore
} from '../../store/user';
import {
	getRelationsSearchApi,
	getUserInfoApi
} from '../../api/login';
const userStore = useUserStore();


console.log(userStore.userInfo);
const msgData = ref({});
const familyMembers = ref([]);
const showPopup = ref(false);



//计算年龄的方法
const calculateAge = (birthday) => {
	if (!birthday) return '';
	const birthDate = new Date(birthday);
	const diff = Date.now() - birthDate.getTime();
	return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
};

// 获取用户信息
const getUserInfo = async () => {
	const res = await getUserInfoApi();
	if (res.code === 200) {
		msgData.value = res.data;
	}
};

// 获取家庭成员
const getRelationsSearch = async () => {
	const res = await getRelationsSearchApi({
		ownId: userStore.userInfo._id || userStore.userInfo.otherId?._id
	});
	if (res.code === 200) {
		familyMembers.value = res.data;
		console.log('家庭成员数据：', familyMembers.value);
	}
};

// 当前用户切换
const switchUser = (user) => {
	// 点击显示用户当前的信息
	console.log('切换到当前用户：', user);
	msgData.value = user;
	showPopup.value = false;
};
// 家庭成员切换
const getRelationType = (user) => {
	console.log('切换到成员：', user);

	// 关闭弹窗
	showPopup.value = false;

	// 跳转到登录页面，预填充用户手机号
	const phone = user.phone || user.phoneNumber || '';

	if (phone) {
		uni.navigateTo({
			url: `/pages/login/login?type=password&phone=${phone}`
		});
	} else {
		// 如果没有手机号，提示用户
		uni.showModal({
			title: '提示',
			content: '该家庭成员没有绑定手机号，无法切换登录',
			showCancel: false
		});
	}
};

onLoad(() => {
	// console.log('我的页面加载');
	// console.log('状态机用户信息:', userStore.userInfo);
	// // 页面加载时也初始化数据
	// getUserInfo();
	// getRelationsSearch();
});

onShow(() => {
	console.log('我的页面显示');
	getUserInfo();
	getRelationsSearch();
})
//点击设置跳转的代码
const toSetting = () => {
	uni.navigateTo({
		url: '/minepackge/pages/mine-setting/mine-setting'
	})
}
</script>

<style lang="scss" scoped>
.left-right {
	background-color: #f0f8ff;
}

.homeTeam {
	width: 220rpx;
	height: 64rpx;
	color: #2984f8;
	font-size: 24rpx;
	border-radius: 16px;
	margin-right: 40rpx;

}

.nameBox {

	font-size: 12px;
	color: #fff;
	margin-top: 20rpx;


}

.tagBox {
	margin-top: 50rpx;
	display: flex;
	flex-direction: column;
}

.tagItem {
	margin-top: 10rpx;
	margin-right: 20rpx;
}

.card-box {
	// display: flex;
	// margin-bottom: 50rpx;
	width: 100%;
	margin-top: 30rpx;
	background: #2984f8;
	height: 332rpx;
	border-radius: 16px;

	// position: relative;
	image {
		width: 128rpx;
		height: 128rpx;
		margin: 40rpx;
	}
}

.my-top {
	display: flex;
	justify-content: space-between;

	text {
		font-size: 28px;
	}

	image {
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
	}
}

.topBox {
	background: #fff;
	margin-bottom: 20rpx;
	padding: 0 40rpx;
	padding-bottom: 60rpx;
}

.msgData-box {
	display: flex;
	align-items: center;
	width: 100%;
}

.msgData-name {
	width: 210rpx;
	display: flex;
	white-space: nowrap;
	/* 确保文本不会换行 */
	overflow: hidden;
	/* 隐藏溢出的内容 */
	text-overflow: ellipsis;
}



.msgData-sign {
	margin-left: 20rpx;
}

/* 弹出层样式 */
.popup-content {
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx;
}

.member-list {
	margin-top: 40rpx;
}

.member-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
	font-size: 32rpx;
	color: #333;
}

.member-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.member-name {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.member-phone {
	font-size: 26rpx;
	color: #999;
}

.current-user {
	background-color: #f8f9fa;
	border-radius: 12rpx;
	padding: 30rpx 20rpx;
	margin-bottom: 20rpx;
}

.current-tag {
	background-color: #4A90E2;
	color: white;
	font-size: 24rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

.switch-icon {
	color: #4A90E2;
	font-size: 32rpx;
	font-weight: bold;
}
</style>